*, *::after, *::before, body {
    box-sizing: border-box;
}
body {
    background-color: #eee;
    font-size: 18px;
    color: #363636;
    margin: 0;
    padding: 0;
}

.content {
    position: relative;
    max-width: 720px;
    padding: 20px 40px;
    background-color: #fff;
    margin: 40px auto 80px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
}
section {
    display: block;
}
h2 {
    margin: 1em 0 0.5em;
}
ol {
    margin-block-start: 0.8em;
    margin-block-end: 0.8em;
    padding-inline-start: 1.4em;
    li {
        line-height: 2;
    }
}
code {
    margin: 0 2px;
    padding: 2px 4px;
    border-radius: 2px;
    color: #476582;
    background-color: rgba(27,31,35,.05);
    font-family: Roboto Mono, Source Sans Pro, Monaco, courier, monospace !important;
    font-size: .875em;
}
.tool {
    position: absolute;
    top: 20px;
    right: 20px;
    button {
        margin-left: 1em;
        cursor: pointer;
    }
}
@media (max-width: 840px) {
    .content {
        margin: 0;
    }
}
@media print {
    body {
        background-color: #fff;
        .content {
            box-shadow: none;
        }
        .tool {
            display: none;
        }
    }
  }